<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="route in breadCrumdData" :key="route.path" :to="{ path: route.path }">{{
      route.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>
  <h2>App</h2>

  <div>
    <!-- 路由入口 类似与html的a标签，to属性指定跳转的目标地址 -->
    <router-link to="/home">首页</router-link>
  </div>
  <div>
    <!-- 声明式跳转 -->
    <router-link to="/list">列表</router-link>
  </div>
  <div>
    <router-link to="/detail">详情</router-link>
  </div>
  <div>
    <router-link to="/basketball">篮球</router-link>
  </div>

  <p>
    <!-- 路由出口（路由匹配的组件会替换router-view) -->
    <!-- 展示1级路由的内容 -->
    <router-view></router-view>
  </p>
</template>

<script setup>
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router';
const breadCrumdData = ref([])
// 获取当前路由信息（路由路径、参数、meta）
const route = useRoute()

watch(route, () => {
  console.log('route.matched=>', route.matched)
  breadCrumdData.value = route.matched
})


</script>

<style>
#nprogress .bar {
  background-color: rgb(200, 137, 137) !important;
}
</style>
